<template>
  <div ref="mainCon" class="container">
    <topTitle
      v-hasBtn="'caseListJc:add'"
      :titleText="titleText"
      :btnText="`添加案件`"
      :isShowBtn="true"
      :pathUrl="pathUrl"
      :oldUrl="oldUrl"
    ></topTitle>
    <div class="mainCon">
      <div class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="案件名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.name"
                placeholder="请输入案件名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="创建时间" class="row-padding-bottom">
              <timeSelection
                @getStartTimeValue="getStartTimeValue"
                @getEndTimeValue="getEndTimeValue"
              ></timeSelection>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in sourceTypeOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item label="">
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <el-button
              type="primary"
              icon="icon iconfont icondaochu"
              v-hasBtn="'caseListJc:export'"
              @click="downloadcontractform"
              class="searchBtn"
            >
              <span>导出</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          @sort-change="sortChange"
          border
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="案件编号">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.caseNo"
                :columnName="'caseNo'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column label="案件名称">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.name"
                :columnName="'name'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            width="220px"
          ></el-table-column>
          <el-table-column
            prop="statusDesc"
            label="状态"
            align="center"
            :formatter="formatTd"
            width="220px"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            fixed="right"
            width="180px"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-hasBtn="'caseListJc:detail'"
                @click="toDetail(scope.row)"
                >查看详情</el-link
              >
              <el-link
                v-if="!isPolice"
                v-hasBtn="'caseListJc:delete'"
                type="primary"
                @click="deleteItem(scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import common from '../../kits/common'

export default {
  name: 'caseListJc',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '案件列表',
      pathUrl: '/home/kmCaseHandle/addCase',
      oldUrl: '/home/kmCaseHandle/caseListJc',
      advanced: false,
      //表格数据
      tableList: [],
      requestUrl: 'api-r/rightscase/expand/findform',
      //搜索条件
      filterField: {
        name: '', //项目名称
        status: '', //开工状态  ；默认只显示已开工状态的项目2020/10/19 恩施
        startDateStr: '',
        endDateStr: '',
      },
      pageSize: 20,
      pageNo: 1,
      isShow: false, //列表加载
      loading: false,
      sourceTypeOptions: [],
      isPolice: false,
    }
  },
  // api-r/rightscase/expand/exportform
  created() {
    this.getStatusList()
    this.getUserType()
  },
  methods: {
    downloadcontractform() {
      this.$refs.pagination.getTableListData()
      setTimeout(() => {
        if (this.tableList.length == 0) {
          this.$message.warning('暂无数据')
          return false
        }
        if (this.isPolice) {
          window.location.href =
            common.commonApi +
            'api-r/rightscase/expand/exportforp?name=' +
            this.filterField.name +
            '&status=' +
            this.filterField.status +
            '&startDateStr=' +
            this.filterField.startDateStr +
            '&endDateStr=' +
            this.filterField.endDateStr +
            '&pageSize=' +
            this.pageSize +
            '&pageNo=' +
            this.pageNo +
            '&sortField=' +
            this.filterField.sortField +
            '&sort=' +
            this.filterField.sort +
            '&access_token=' +
            localStorage.getItem('access_token')
        } else {
          window.location.href =
            common.commonApi +
            'api-r/rightscase/expand/exportform?name=' +
            this.filterField.name +
            '&status=' +
            this.filterField.status +
            '&startDateStr=' +
            this.filterField.startDateStr +
            '&endDateStr=' +
            this.filterField.endDateStr +
            '&pageSize=' +
            this.pageSize +
            '&pageNo=' +
            this.pageNo +
            '&sortField=' +
            this.filterField.sortField +
            '&sort=' +
            this.filterField.sort +
            '&access_token=' +
            localStorage.getItem('access_token')
        }
      }, 500)
    },
    getUserType() {
      this.axios({
        method: 'get',
        url: 'api-u/users/current',
      })
        .then((res) => {
          //用户类型
          if (res.data.sysRoles.length) {
            let arr = res.data.sysRoles.filter((item) => item.code == 'POLICE')
            if (arr.length) {
              this.isPolice = true
              this.requestUrl = 'api-r/rightscase/expand/findforp'
            }
          }
          this.searchList()
        })
        .catch((resp) => {})
    },
    getStatusList() {
      this.axios.post('api-r/rightscase/expand/casestate').then((res) => {
        if (!res.data.hasError) {
          this.sourceTypeOptions = res.data.result
        }
      })
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startDateStr = val
      } else {
        this.filterField.startDateStr = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDateStr = val
      } else {
        this.filterField.endDateStr = ''
      }
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.pageSize = 20
      this.pageNo = 1
      this.$refs.pagination.getTableListData()
    },
    //跳转详情
    toDetail(row) {
      this.$router.push({
        path: '/home/kmCaseHandle/caseTransferDetail',
        name: 'caseTransferDetail',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/kmCaseHandle/caseListJc',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    deleteItem(item) {
      this.$confirm('确认删除吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.axios
            .post('api-r/rightscase/expand/delete', { id: item.id })
            .then((res) => {
              if (!res.data.hasError) {
                this.$message.success('删除成功')
                this.searchList()
              } else {
                this.$message.warning(res.data.errorMsg)
              }
            })
        })
        .catch(() => {})
    },
  },
}
</script>

<style scoped lang="less">
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
}
.mainCon {
  top: 210px;
}
@import '../../../static/css/filterArea.less';
</style>
